package com.example.mplayer.screens

import android.util.Log
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Card
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.mplayer.R
import com.example.mplayer.data.ChapterWithVideos
import com.example.mplayer.data.Video
import com.example.mplayer.viewmodels.CourseDetailViewModel

@Composable
fun CourseDetailScreen(
    courseId: String,
    onBackClick: () -> Unit,
    onVideoClick: (Video) -> Unit,
    modifier: Modifier = Modifier,
    viewModel: CourseDetailViewModel = viewModel()
) {
    val currentChapters by viewModel.currentChapters.collectAsState()
    val navigationStack by viewModel.navigationStack.collectAsState()
    val courseTitle by viewModel.courseTitle.collectAsState()

    LaunchedEffect(courseId) {
        Log.d("CourseDetail", "LaunchedEffect triggered with courseId: $courseId")
        viewModel.loadInitialChapters(courseId)
    }

    Column(modifier = modifier.fillMaxSize()) {
        // 顶部栏
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                painter = painterResource(id = R.drawable.ic_back),
                contentDescription = "返回",
                modifier = Modifier.clickable { 
                    if (navigationStack.size > 1) {
                        viewModel.navigateBack()
                    } else {
                        onBackClick()
                    }
                }
            )
            Text(text = courseTitle)
        }

        // 导航路径
        if (navigationStack.size > 1) {
            LazyRow(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp),
                horizontalArrangement = Arrangement.spacedBy(4.dp)
            ) {
                items(navigationStack.size) { index ->
                    if (index > 0) {
                        Icon(
                            painter = painterResource(id = R.drawable.ic_arrow_forward),
                            contentDescription = null,
                            modifier = Modifier.size(16.dp)
                        )
                    }
                    Text(
                        text = if (index == 0) "课程目录" else "第 ${index} 章",
                        modifier = Modifier.clickable {
                            repeat(navigationStack.size - 1 - index) {
                                viewModel.navigateBack()
                            }
                        }
                    )
                }
            }
        }

        // 章节和视频列表
        if (currentChapters.isEmpty()) {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = "暂无章节内容",
                    style = MaterialTheme.typography.bodyLarge,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
        } else {
            LazyColumn(
                modifier = Modifier.fillMaxSize(),
                contentPadding = PaddingValues(16.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                items(currentChapters) { chapterWithVideos ->
                    ChapterItem(
                        chapter = chapterWithVideos,
                        onChapterClick = { viewModel.loadChapters(it.chapter.id) },
                        onVideoClick = onVideoClick
                    )
                }
            }
        }
    }
}

@Composable
private fun ChapterItem(
    chapter: ChapterWithVideos,
    onChapterClick: (ChapterWithVideos) -> Unit,
    onVideoClick: (Video) -> Unit
) {
    Card(
        modifier = Modifier.fillMaxWidth(),
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // 章节标题
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onChapterClick(chapter) },
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = chapter.chapter.title,
                    style = MaterialTheme.typography.titleMedium
                )
                Icon(
                    painter = painterResource(id = R.drawable.ic_arrow_forward),
                    contentDescription = "进入章节"
                )
            }

            // 视频列表
            if (chapter.videos.isNotEmpty()) {
                chapter.videos.forEach { video ->
                    Row(
                        modifier = Modifier
                            .fillMaxWidth()
                            .clickable { onVideoClick(video) }
                            .padding(vertical = 8.dp),
                        horizontalArrangement = Arrangement.spacedBy(8.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Icon(
                            painter = painterResource(id = R.drawable.ic_video),
                            contentDescription = null,
                            modifier = Modifier.size(20.dp)
                        )
                        Text(
                            text = video.title,
                            style = MaterialTheme.typography.bodyMedium
                        )
                        Spacer(modifier = Modifier.weight(1f))
                        Icon(
                            painter = painterResource(id = R.drawable.ic_play),
                            contentDescription = "播放",
                            modifier = Modifier.size(20.dp)
                        )
                    }
                }
            }
        }
    }
} 